<script setup lang="ts">
  import { watch } from 'vue';
  import DetailDrawer from '@/components/detail-drawer/index.vue';
  import { useForm } from '@/hooks/arco/useForm';
  import {
    queryServiceCateDetail,
    createServiceCate,
    updateServiceCate,
    deleteServiceCate,
  } from '@/api-new2/service/service-classification';
  import DictSelect from '@/components/dict-select/index.vue';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';

  // 定义组件属性
  interface DrawerProps {
    onSuccess?: () => void;
  }

  const props = withDefaults(defineProps<DrawerProps>(), {
    onSuccess: () => {},
  });

  // 表单验证规则
  const formRules = {
    title: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
    parentId: [
      { required: true, message: '请选择上级分类', trigger: 'change' },
    ],
  };

  // 使用useForm hook
  const form = useForm({
    state: {
      id: '',
      parentId: '',
      title: '',
      createdAt: '',
      itemCount: 0,
    },
    rules: formRules,
  });

  // 使用mode modal binder
  const editModal = useDetailDrawerBinder({
    modalName: '服务分类',
    deleteApi: () => deleteServiceCate({ id: form.state.id }),
    async onShow(mode, record) {
      // 详情模式下获取详细信息
      if (mode === 'detail' && record?.id) {
        const res = await queryServiceCateDetail({ id: record.id });
        form.setFieldsValue(res.data);
      }
      // 编辑模式下获取详细信息
      else if (mode === 'edit' && record?.id) {
        const res = await queryServiceCateDetail({ id: record.id });
        form.setFieldsValue(res.data);
      }
      // 新增模式下清空表单
      else if (mode === 'add') {
        form.backToInit();
      }
    },
    async onOkClick(mode) {
      const valid = await form.validate();
      if (!valid) {
        return Promise.reject(new Error('表单验证失败'));
      }

      // 新增模式
      if (mode === 'add') {
        await createServiceCate(form.state);
      }
      // 编辑模式
      else if (mode === 'edit') {
        await updateServiceCate(form.state);
      }

      props.onSuccess();
      return Promise.resolve();
    },
  });

  // 监听模式变化，重置表单验证
  watch(
    () => editModal.bindProps.mode,
    () => {
      form.clearValidate();
    }
  );

  // 暴露方法给父组件
  defineExpose(editModal.expose);
</script>

<template>
  <DetailDrawer
    v-bind="editModal.bindProps"
    :mask-closable="false"
    width="500px"
    @cancel="editModal.hideModal"
  >
    <a-form
      v-bind="form.bindProps"
      label-align="right"
      :auto-label-width="true"
    >
      <a-form-item v-if="editModal.modeIs('detail')" field="id" label="分类ID">
        <a-input v-model="form.state.id" disabled />
      </a-form-item>

      <a-form-item field="title" label="分类名称">
        <a-input
          v-model="form.state.title"
          :disabled="editModal.modeIs('detail')"
          placeholder="请输入分类名称"
        />
      </a-form-item>

      <a-form-item field="parentId" label="上级分类">
        <DictSelect
          v-model="form.state.parentId"
          type="service_category"
          :disabled="editModal.modeIs('detail')"
          placeholder="请选择上级分类"
        />
      </a-form-item>

      <a-form-item
        v-if="editModal.modeIs('detail')"
        field="level"
        label="分类级别"
      >
        <a-input
          :model-value="form.state.parentId === '0' ? '一级分类' : '二级分类'"
          disabled
        />
      </a-form-item>

      <a-form-item
        v-if="editModal.modeIs('detail')"
        field="itemCount"
        label="所含项目总数"
      >
        <a-input v-model="form.state.itemCount" disabled />
      </a-form-item>

      <a-form-item
        v-if="editModal.modeIs('detail')"
        field="createdAt"
        label="创建时间"
      >
        <a-input v-model="form.state.createdAt" disabled />
      </a-form-item>
    </a-form>
  </DetailDrawer>
</template>

<style lang="less" scoped></style>
